<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getBookingScheduleService } from '@/apis/hospital'
import type {
  BookingScheduleList,
  BaseMap,
  BookingScheduleResponseData
} from '@/apis/hospital/type'

const route = useRoute()

const total = ref<number>(0)
const baseMap = ref<BaseMap>({
  bigname: '',
  hosname: '',
  depname: '',
  workDateString: ''
})
const scheduleList = ref<BookingScheduleList>()
const pageNo = ref<number>(1)
const pageSize = ref<number>(6)

// 获取排班信息
const getBookingSchedule = async (pager = 1) => {
  pageNo.value = pager
  const res: BookingScheduleResponseData = await getBookingScheduleService(
    route.query.hoscode as string,
    route.query.depcode as string,
    pageNo.value,
    pageSize.value
  )
  scheduleList.value = res.data.bookingScheduleList
  baseMap.value = res.data.baseMap
  total.value = res.data.total
}
// 分页
const onSizeChange = () => {
  getBookingSchedule(pageNo.value)
}
onMounted(() => getBookingSchedule())
</script>

<template>
  <el-breadcrumb separator="|" style="margin-top: 20px; font-size: 20px">
    <el-breadcrumb-item
      :to="`/hospital/register?hoscode=${$route.query.hoscode}&depcode=${$route.query.depcode}`"
      >{{ baseMap.hosname }}</el-breadcrumb-item
    >
    <el-breadcrumb>{{ baseMap.bigname }} - {{ baseMap.depname }}</el-breadcrumb>
  </el-breadcrumb>

  <div class="center">
    <div class="title">{{ baseMap.workDateString }}</div>
    <div class="container">
      <div
        v-for="(item, index) in scheduleList"
        :key="index"
        class="time"
        :class="{
          active:
            item.status === 1 || (item.status === 0 && item.availableNumber > 0)
        }"
      >
        <div class="top">{{ item.workDateMd }} - {{ item.dayOfWeek }}</div>
        <div class="bottom">
          <div v-if="item.status === -1">停止挂号</div>
          <div v-if="item.status === 0">
            {{
              item.availableNumber === -1
                ? '约满'
                : `剩余号源${item.availableNumber}`
            }}
          </div>
          <div v-if="item.status === 1">可预约</div>
        </div>
      </div>
    </div>
  </div>
  <el-pagination
    layout="prev, pager, next"
    :total="total"
    v-model:current-page="pageNo"
    v-model:page-size="pageSize"
    @current-change="getBookingSchedule"
    @size-change="onSizeChange"
    :page-count="2"
  ></el-pagination>

  <div>
    <el-text tag="p">上午号源</el-text>
    <el-text tag="p">下午号源</el-text>
  </div>
</template>

<style scoped lang="scss">
.center {
  margin-top: 40px;
  text-align: center;
  .title {
    font-size: 20px;
    color: #707070;
  }
  .container {
    display: flex;
    justify-content: space-evenly;
    margin: 20px 0;
    .time {
      width: 150px;
      height: 100px;
      border: 2px solid #b6b2b2;
      &.active {
        border: 2px solid #409eff;
        .top {
          background-color: #409eff;
        }
      }
      .top {
        height: 40%;
        background-color: #b0a9a9;
      }
    }
  }
}
.el-pagination {
  margin: 0 auto;
  width: 140px;
}
</style>
